<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>注册</title>
	<link rel="stylesheet" href="/public/layui/css/layui.css">

	<style>
		body {
			background: #f8f8f8;
			/*font-family: 'PT Sans', Helvetica, Arial, sans-serif;*/
			font-family: "Microsoft YaHei", 微软雅黑, "Microsoft JhengHei", 华文细黑, STHeiti, MingLiu;
			text-align: center;
			color: #fff;
		}

		.page-container {
			margin: 120px auto 0 auto;
		}

		h1 {
			font-size: 30px;
			font-weight: 700;
			text-shadow: 0 1px 4px rgba(0, 0, 0, .2);
		}

		form {
			position: relative;
			width: 305px;
			margin: 15px auto 0 auto;
			text-align: center;
		}

		input {
			width: 270px;
			height: 42px;
			line-height: 42px;
			margin-top: 25px;
			padding: 0 15px;
			background: #2d2d2d;
			/* browsers that don't support rgba */
			background-color: transparent;
			background: rgba(45, 45, 45, .15);
			-moz-border-radius: 6px;
			-webkit-border-radius: 6px;
			border-radius: 6px;
			border: 1px solid #3d3d3d;
			/* browsers that don't support rgba */
			border: 1px solid rgba(255, 255, 255, .15);
			-moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset;
			-webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset;
			box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset;
			font-family: 'PT Sans', Helvetica, Arial, sans-serif;
			font-size: 14px;
			color: #fff;
			text-shadow: 0 1px 2px rgba(0, 0, 0, .1);
			-o-transition: all .2s;
			-moz-transition: all .2s;
			-webkit-transition: all .2s;
			-ms-transition: all .2s;
		}

		input:-moz-placeholder {
			color: #fff;
		}

		input:-ms-input-placeholder {
			color: #fff;
		}

		input::-webkit-input-placeholder {
			color: #fff;
		}

		input:focus {
			outline: none;
			-moz-box-shadow:
				0 2px 3px 0 rgba(0, 0, 0, .1) inset,
				0 2px 7px 0 rgba(0, 0, 0, .2);
			-webkit-box-shadow:
				0 2px 3px 0 rgba(0, 0, 0, .1) inset,
				0 2px 7px 0 rgba(0, 0, 0, .2);
			box-shadow:
				0 2px 3px 0 rgba(0, 0, 0, .1) inset,
				0 2px 7px 0 rgba(0, 0, 0, .2);
		}

		button {
			cursor: pointer;
			width: 300px;
			height: 44px;
			margin-top: 25px;
			padding: 0;
			background: #ef4300;
			-moz-border-radius: 6px;
			-webkit-border-radius: 6px;
			border-radius: 6px;
			border: 0px;
			-moz-box-shadow:
				0 15px 30px 0 rgba(255, 255, 255, .25) inset,
				0 2px 7px 0 rgba(0, 0, 0, .2);
			-webkit-box-shadow:
				0 15px 30px 0 rgba(255, 255, 255, .25) inset,
				0 2px 7px 0 rgba(0, 0, 0, .2);
			box-shadow:
				0 15px 30px 0 rgba(255, 255, 255, .25) inset,
				0 2px 7px 0 rgba(0, 0, 0, .2);
			font-family: 'PT Sans', Helvetica, Arial, sans-serif;
			font-size: 14px;
			font-weight: 700;
			color: #fff;
			text-shadow: 0 1px 2px rgba(0, 0, 0, .1);
			-o-transition: all .2s;
			-moz-transition: all .2s;
			-webkit-transition: all .2s;
			-ms-transition: all .2s;
		}

		button:hover {
			-moz-box-shadow:
				0 15px 30px 0 rgba(255, 255, 255, .15) inset,
				0 2px 7px 0 rgba(0, 0, 0, .2);
			-webkit-box-shadow:
				0 15px 30px 0 rgba(255, 255, 255, .15) inset,
				0 2px 7px 0 rgba(0, 0, 0, .2);
			box-shadow:
				0 15px 30px 0 rgba(255, 255, 255, .15) inset,
				0 2px 7px 0 rgba(0, 0, 0, .2);
		}

		button:active {
			-moz-box-shadow:
				0 15px 30px 0 rgba(255, 255, 255, .15) inset,
				0 2px 7px 0 rgba(0, 0, 0, .2);
			-webkit-box-shadow:
				0 15px 30px 0 rgba(255, 255, 255, .15) inset,
				0 2px 7px 0 rgba(0, 0, 0, .2);
			box-shadow:
				0 5px 8px 0 rgba(0, 0, 0, .1) inset,
				0 1px 4px 0 rgba(0, 0, 0, .1);

			border: 0px solid #ef4300;
		}

		.connect {
			width: 800px;
			margin: 50px auto 0 auto;
			font-size: 14px;

			text-shadow: 0 1px 3px rgba(0, 0, 0, .2);
		}

		.connect p {
			/* position: relative; */
			/* left: -140%; */
			top: 0
		}

		.connect a {
			display: inline-block;
			width: 32px;
			height: 35px;
			margin-top: 15px;
			-o-transition: all .2s;
			-moz-transition: all .2s;
			-webkit-transition: all .2s;
			-ms-transition: all .2s;
		}

		.alert {
			width: 310px;
			height: 200px;
			background: #000;
			position: absolute;
			top: -40%;
			left: 50%;
			margin: -101px 0 0 -151px;
		}

		.alert h2 {
			height: 40px;
			padding-left: 8px;
			font-size: 14px;
			background: #FF0543;
			text-align: left;
			line-height: 40px;
		}

		.alert .alert_con {
			background: #fff;
			height: 160px;
		}

		.alert .alert_con p {
			color: #000;
			line-height: 90px;
		}

		.alert .alert_con .btn {
			padding: 3px 10px;
			color: #fff;
			cursor: pointer;
			background: #72D1FF;
			border: 1px solid #72D1FF;
			border-radius: 4px;
		}

		.alert .alert_con .btn:hover {
			background: #4FB2EF;
			border: 1px solid #4FB2EF;
			border-radius: 4px;
		}

		.bg {
			background: url(/public/img/bg1.jpg) no-repeat;
			background-size: 100% 100%;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: -1;
		}
	</style>
</head>

<body>
	<div class="bg"></div>

	<div class="page-container">
		<h1>欢迎注册</h1>
		<form class="layui-form" action="" method="post">
			<div>
				<input type="text" name="username" class="username" placeholder="用户名" autocomplete="off">
			</div>
			<div>
				<input type="password" name="password" class="password" placeholder="密码" oncontextmenu="return false"
					onpaste="return false">
			</div>
			<button type="button" lay-submit>注册</button><br /><br /><br />
			<a href="./login.html">已有账号?前往登录</a><br /><br />
			<a href="/">返回首页</a>
		</form>
		<div class="connect">
			<p>If we can only encounter each other rather than stay with each other,then I wish we had never
				encountered.</p>
			<p style="margin-top:20px;">如果只是遇见，不能停留，不如不遇见。</p>
		</div>
	</div>

	<script src="/public/layui/layui.js"></script>
	<script>
		layui.config({
			base: '/public/js/'
		}).use(['layer', 'form', 'jquery', 'commonLayer'], function () {
			var layer = layui.layer, form = layui.form, $ = layui.jquery;
			var commonLayer = layui.commonLayer();

			form.on('submit', function (data) {
				// console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
				// console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
				// console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
				var load = layer.load(1);
				$.ajax({
					method: 'post',
					url: `/api/register`,
					data: data.field,
					dataType: 'json',
					success: (ret) => {
						layer.close(load)
						if (ret.success) {
							sessionStorage.setItem('token', ret.data.token);
							commonLayer.successMsg('注册成功,前往登录')
							window.location.href = "./login.html";
						} else {
							commonLayer.errorMsg(ret.message || '网络开了会差,请稍后再试')
						}
					}
				})
				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});
		});
	</script>
</body>


</html>